<!-- 活动的分类 -->
<template>
  <view class="menus hide-scroll">
    <view class="line-bl">
      <view
        class="menus-cell"
        v-for="item in list.slice(0, Math.ceil(list.length / 2))"
        :key="item"
        :class="{ active: typeId == item.id }"
		@click="emits('update:typeId',item.id)"
      >
        <view class="title siyuan-medium">
          <image
            src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/arrow_white.png"
            mode="widthFix"
          ></image>
          {{ item.typeName }}
        </view>
        <view class="desc">{{ item.typeNameEn }}</view>
      </view>
    </view>
    <view class="line-bl">
      <view
        class="menus-cell"
        v-for="item in list.slice(Math.ceil(list.length / 2))"
        :key="item"
        :class="{ active: typeId == item.id }"
		@click="emits('update:typeId',item.id)"
      >
        <view class="title siyuan-medium">
          <image
            src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/arrow_white.png"
            mode="widthFix"
          ></image>
          {{ item.typeName }}
        </view>
        <view class="desc intel-one-mono-regular">{{ item.typeNameEn }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { watch } from "vue";
let props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  typeId: {
    type: Number,
    default: 1,
  },
});

watch(props.list, () => {}, {
  deep: true,
});
let emits = defineEmits(['update:typeId'])
</script>

<style lang="scss" scoped>
.menus {
  margin-bottom: 32rpx;
  overflow-y: hidden;
  overflow-x: scroll;
  .line-bl {
    white-space: nowrap;
    display: table;
  }
  .line-bl + .line-bl {
    margin-left: 102rpx;
  }
  .menus-cell {
    position: relative;
    display: table-cell;
    line-height: normal;
    .title {
      display: table-cell;
      padding: 0rpx 16rpx;
      background-color: #000000;
      font-size: 26rpx;
      color: #ffffff;
      line-height: 40rpx;
    }
    .desc {
      display: table-cell;
      padding: 0 12rpx 0 14rpx;
      background-color: #ffffff;
      font-size: 24rpx;
      line-height: 40rpx;
    }
    image {
      position: absolute;
      left: 1px;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 26rpx;
      display: none;
    }
  }
  .menus-cell.active {
    .title {
      padding-left: 46rpx;
    }
    image {
      display: inherit;
    }
  }
}
</style>
